import React from "react";

import BarNavUiComponent from './Logic_barNavUi';

export default class Logic_chartVertical extends React.Component {

    render() {

        const props = Object.assign({},this.props);

        const {data,dateArr,MAX_TOTAL_COUNT,canvasWidth,isSewing} = props;

        const dateArrRender = ()=>
            dateArr.map((dayValueOf,_i)=>
                <BarNavUiComponent
                    key={`navBar-${_i}`}
                    isSewing={isSewing}
                    index={_i}
                    isShaft={true}
                    date={dayValueOf}
                    data={data[dayValueOf]}
                    MAX_TOTAL_COUNT={MAX_TOTAL_COUNT}
                />
            );

        return (
            <div className="Yyd-chart-main">
                <div className="Yyd-chart-bg-canvas">
                    <div className="Yyd-chart-bg-stroke" style={{width:canvasWidth}}>
                        {
                            // y轴数量 中层横线
                            [0,0,0,0].map(()=>
                                <div className="Yyd-chart-bg-line"/>
                            )
                        }
                    </div>
                </div>
                <div className="Yyd-chart-xAxis">
                    <div className="Yyd-chart-stroke-container">
                        {/*月数*/}
                        <ul>
                            {
                                dateArrRender()
                            }
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}